
<template>
  <div class="login">
    <div class="login-head" @click="goHome">
      <i class="iconfont icon-guanbi"> </i>
    </div>
    <div class="login-form">
      <div class="logo">
        <img
          src="https://x.dscmall.cn/storage/images/wap_logo.jpg?4RugNq"
          alt=""
        />
      </div>
      <form action="">
        <div class="input-box">
          <i class="icon-wode iconfont"></i>
          <input type="text" placeholder="请输入您的用户名/手机号" />
        </div>
        <div class="input-box">
          <i class="icon-wode iconfont"></i>

          <input
            :type="passwordShow ? 'text' : 'password'"
            placeholder="请输入密码"
            autocomplete="off"
          />
          <i
            class="icon-wodexiao iconfont"
            @click="passwordShow = !passwordShow"
          ></i>
          <span>忘记密码</span>
        </div>
      </form>
      <div class="privacy">
        <i
          class="icon-danxuan iconfont"
          :class="agree ? 'icon-danxuanxuanzhong' : 'icon-danxuan'"
          @click="agree = !agree"
        ></i>
        <span>我已阅读并同意《隐私声明》</span>
      </div>
      <div class="signup-button">
        <button @click="loginBtn">账号密码登录</button>
        <button>短信快捷登录</button>
        <div class="tips">还没有账号？<span>立即注册</span></div>
      </div>
      <div></div>
    </div>
    <div class="quick-login">
      <p>其他登陆方式</p>
      <img
        src=""
        alt=""
      />
      <hr />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    goHome() {
      this.$router.push("/home");
    },
    loginBtn(){
      if(this.agree){

        localStorage.setItem('login',true);
        this.$router.back();
      }else{
        alert('请阅读并同意《隐私声明》')
      }
    }
  },
  data() {
    return {
      agree: false,
      passwordShow: false,
    };
  },
};
</script>

<style lang="less" scoped>
.login {
  padding: 0 3rem;
  background-color: #fff;
  position: relative;
  .login-head {
    top: -2rem;
    position: absolute;
  }
  .login-form {
    .logo {
      width: 8rem;
      height: 8rem;
      border-radius: 50%;
      overflow: hidden;
      margin: 15% auto;
      img {
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
      }
    }
    .input-box {
      display: flex;
      width: 31.5rem;
      height: 4rem;
      align-items: center;
      border-bottom: 1px solid #ccc;
      justify-content: flex-start;
      padding: 0.5rem 0;
      margin-bottom: 1rem;
      i {
        text-align: center;
        font-size: 2rem;
        margin-right: 1rem;
      }
      input {
        // width: 28.5rem;
        flex: 1;
        height: 3rem;
        font-size: 1.4rem;
      }
      .icon-wodexiao {
        border-right: 1px solid #ccc;
        padding-right: 1rem;
      }
    }
    .privacy {
      padding-top: 1rem;
    }
    .signup-button {
      width: 100%;
      height: 13rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
      margin-top: 2rem;
      button {
        height: 4rem;
        border-radius: 2rem;
        font-size: 1.4rem;
      }
      button:first-of-type {
        background-color: #ff1515;
        color: #fff;
      }
      button:last-of-type {
        background-color: #fff;
        color: #fa2a29;
        box-sizing: border-box;
        border: 1px solid #fa2a29;
      }
      .tips {
        span {
          color: #fa2a29;
        }
      }
    }
  }
  .quick-login {
    width: 100%;
    text-align: center;
    position: relative;
    top: 9rem;
    color: #999;
    p {
      text-align: center;
      padding: 0 1.5rem;
      background-color: #fff;
      width: 10rem;
      margin: 0 auto;
    }
    img {
      margin-top: 2rem;
      width: 4.5rem;
    }
    hr {
      width: 25rem;
      left: calc(50% - 12.5rem);
      position: absolute;
      top: 0.8rem;
      z-index: -1;
    }
  }
}
</style>